<html>

<body>

<script type="text/javascript" src="jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="JSLINQ.js"></script>

<script type="text/javascript">

var scale = 1.00;

var boardCanvasCtx, pieceCanvasCtx;

var baseSquareWidth = 20;
var baseSquareHeight = 20;


var boardHeight, boardWidth;

var colors = ["#FF1A00", "#1A00FF", "#FF66FF", "#FFFF66", "#75EB00", "#EB7500"];

Game = {
	playerPieceCount: 6,
	DrawPipRect: function(ctx, pipAreaRect, pipDim) {
		ctx.fillRect(pipAreaRect.startCoord.x + (pipAreaRect.size.x / 2 - pipDim.x / 2), 
			pipAreaRect.startCoord.y + (pipAreaRect.size.y / 2 - pipDim.y / 2), pipDim.x, pipDim.y);
	},
	
	DrawPieceRect: function(ctx, pieceRect, colorIndex, shapeIndex) {
		Game.DrawPiece(ctx, pieceRect.startCoord.x, pieceRect.startCoord.y, pieceRect.size.x, pieceRect.size.y, colorIndex, shapeIndex);
	},
	
	DrawPiece: function(ctx, x, y, width, height, colorIndex, shapeIndex) {
       ctx.fillStyle = colors[colorIndex];
       ctx.fillRect(x, y, width, height);

       //draw pips
       var pipDim = new Game.Coord(width / 8, height / 8);
       ctx.fillStyle = "#000";
       switch (shapeIndex) {
               case 0:
                       ctx.fillRect(x + (width / 2 - pipDim.x / 2), y + (height / 2 - pipDim.y / 2), pipDim.x, pipDim.y);
                       break;
               case 1:
                       var topRight = new Game.Rect(new Game.Coord(x + (width / 2), y), new Game.Coord(width / 2, height / 2));
                       Game.DrawPipRect(ctx, topRight, pipDim);
                       var bottomLeft = new Game.Rect(new Game.Coord(x, y + height / 2), new Game.Coord(width / 2, height / 2));
                       Game.DrawPipRect(ctx, bottomLeft, pipDim);
                       break;
               case 2:
                       ctx.fillRect(x + (width / 2 - pipDim.x / 2), y + (height / 2 - pipDim.y / 2), pipDim.x, pipDim.y);
                       var topRight = new Game.Rect(new Game.Coord(x + (width / 2), y), new Game.Coord(width / 2, height / 2));
                       Game.DrawPipRect(ctx, topRight, pipDim);
                       var bottomLeft = new Game.Rect(new Game.Coord(x, y + height / 2), new Game.Coord(width / 2, height / 2));
                       Game.DrawPipRect(ctx, bottomLeft, pipDim);
                       break;
               case 3:
                       var topRight = new Game.Rect(new Game.Coord(x + (width / 2), y), new Game.Coord(width / 2, height / 2));
                       Game.DrawPipRect(ctx, topRight, pipDim);
                       var bottomLeft = new Game.Rect(new Game.Coord(x, y + height / 2), new Game.Coord(width / 2, height / 2));
                       Game.DrawPipRect(ctx, bottomLeft, pipDim);
                       var topLeft = new Game.Rect(new Game.Coord(x, y), new Game.Coord(width / 2, height / 2));
                       Game.DrawPipRect(ctx, topLeft, pipDim);
                       var bottomRight = new Game.Rect(new Game.Coord(x + (width / 2), y + height / 2), new Game.Coord(width / 2, height / 2));
                       Game.DrawPipRect(ctx, bottomRight, pipDim);
                       break;
               case 4:
                       ctx.fillRect(x + (width / 2 - pipDim.x / 2), y + (height / 2 - pipDim.y / 2), pipDim.x, pipDim.y);
                       var topRight = new Game.Rect(new Game.Coord(x + (width / 2), y), new Game.Coord(width / 2, height / 2));
                       Game.DrawPipRect(ctx, topRight, pipDim);
                       var bottomLeft = new Game.Rect(new Game.Coord(x, y + height / 2), new Game.Coord(width / 2, height / 2));
                       Game.DrawPipRect(ctx, bottomLeft, pipDim);
                       var topLeft = new Game.Rect(new Game.Coord(x, y), new Game.Coord(width / 2, height / 2));
                       Game.DrawPipRect(ctx, topLeft, pipDim);
                       var bottomRight = new Game.Rect(new Game.Coord(x + (width / 2), y + height / 2), new Game.Coord(width / 2, height / 2));
                       Game.DrawPipRect(ctx, bottomRight, pipDim);
                       break;
               case 5:
                       var topLeftSixth = new Game.Rect(new Game.Coord(x, y), new Game.Coord(width / 3, height / 2));
                       Game.DrawPipRect(ctx, topLeftSixth, pipDim);
                       var topMiddleSixth = new Game.Rect(new Game.Coord(x + width / 3, y), new Game.Coord(width / 3, height / 2));
                       Game.DrawPipRect(ctx, topMiddleSixth, pipDim);
                       var topRightSixth = new Game.Rect(new Game.Coord(x + (width / 3) * 2, y), new Game.Coord(width / 3, height / 2));
                       Game.DrawPipRect(ctx, topRightSixth, pipDim);
                       var bottomLeftSixth = new Game.Rect(new Game.Coord(x , y + height / 2), new Game.Coord(width / 3, height / 2));
                       Game.DrawPipRect(ctx, bottomLeftSixth, pipDim);
                       var bottomMiddleSixth = new Game.Rect(new Game.Coord(x  + (width / 3), y + height / 2), new Game.Coord(width / 3, height / 2));
                       Game.DrawPipRect(ctx, bottomMiddleSixth, pipDim);
                       var bottomRightSixth = new Game.Rect(new Game.Coord(x  + (width / 3) * 2, y + height / 2), new Game.Coord(width / 3, height / 2));
                       Game.DrawPipRect(ctx, bottomRightSixth, pipDim);
                       break;
       }
	}
};
Game.Tray = {
	pieceSelectedIndex: -1,
	pieceWidth: 40, 
	pieceHeight: 40,
	pieceRects: [],
	pieceJson: {},
	drawTrayPieces: function(ctx) {
		var pieceCanvasHeight = $('#pieceCanvas').height();
		var pieceCanvasWidth = $('#pieceCanvas').width();
		ctx.fillStyle="#C0C0C0";
		ctx.fillRect(0,0,pieceCanvasWidth,pieceCanvasHeight);
		Game.Tray.pieceRects.length = 0;
		var startx = 10;
		for (var curX = 0; curX < Game.playerPieceCount; curX++) {
			Game.Tray.pieceRects.push(new Game.Rect(new Game.Coord(startx + curX * 60, 10), new Game.Coord(Game.Tray.pieceWidth, Game.Tray.pieceHeight)));
			if (Game.Tray.pieceJson[curX].boardPosX == null && Game.Tray.pieceJson[curX].boardPosY == null)
				Game.DrawPieceRect(ctx, Game.Tray.pieceRects[curX], Game.Tray.pieceJson[curX].colorIndex, Game.Tray.pieceJson[curX].shapeIndex);
		}
	},
	piecesOnBoard: function() {
		return JSLINQ(Game.Tray.pieceJson).Where(function(item){return item.boardPosX != null && item.boardPosY != null;}).items;
	},
	recallPiece: function(piece) {
		var xpos = piece.boardPosX + Game.Board.OffsetFromScreenOrigin.x;
		var ypos = piece.boardPosY + Game.Board.OffsetFromScreenOrigin.y;
		piece.boardPosX = null;
		piece.boardPosY = null;
		Game.Tray.drawTrayPieces(pieceCanvasCtx);
		boardCanvasCtx.fillStyle="#C8C8C8";
		boardCanvasCtx.fillRect(xpos * (baseSquareWidth * scale),ypos * (baseSquareHeight * scale), baseSquareWidth * scale,baseSquareHeight * scale);
		
		//draw border
		if (false)
			boardCanvasCtx.strokeRect(xpos * (baseSquareWidth * scale),ypos * (baseSquareHeight * scale), baseSquareWidth * scale,baseSquareHeight * scale);
	}
};
Game.Coord = function(x, y) {
       this.x = x;
       this.y = y;
};
Game.Rect = function(coord, size) {
	this.startCoord = coord;
	this.size = size;
	this.endCoord = function() {
		return new Game.Coord(this.startCoord.x + this.size.x, this.startCoord.y + this.size.y);
	}
	this.hitTest = function(coord) {
		if (coord.x > this.startCoord.x && coord.y > this.startCoord.y &&
				coord.x < this.endCoord().x && coord.y < this.endCoord().y)
			return true;
		return false;
	};
	this.drawRectBorder = function(ctx, color) {
		ctx.strokeStyle = color;
		ctx.lineboardWidth   = 2;
		
		ctx.strokeRect(this.startCoord.x - 5, this.startCoord.y - 5, this.size.x + 10, this.size.y + 10);
	};
};

//dummy struct. will come from server.
Game.Board = {
	BoardSquareCount: {width: 100, height: 100},
	OffsetFromScreenOrigin: {x: 10, y: 10},
	Pieces: [{colorIndex: 2, shapeIndex: 1, boardPosX: 0, boardPosY: 0}, {colorIndex: 2, shapeIndex: 2, boardPosX: -1, boardPosY: 0}]
};

$(document).ready(function () {
	var c=document.getElementById("boardCanvas");
	boardCanvasCtx=c.getContext("2d");
	var p=document.getElementById("pieceCanvas");
	pieceCanvasCtx=p.getContext("2d");

	boardCanvasCtx.fillStyle="#C8C8C8";
	boardHeight = $('#boardCanvas').height();
	boardWidth = $('#boardCanvas').width();
	boardCanvasCtx.fillRect(0,0,boardWidth * scale,boardHeight * scale);

	boardCanvasCtx.strokeStyle = '#000';
	boardCanvasCtx.lineboardWidth   = 1;
	var hNdx, vNdx;
	if (false) {
		for (hNdx = (baseSquareHeight * scale); hNdx < boardHeight * scale; hNdx += (baseSquareHeight * scale)) {
				//ctx.beginPath();
			   boardCanvasCtx.moveTo(0, hNdx);
			   boardCanvasCtx.lineTo(boardWidth * scale, hNdx);
			   boardCanvasCtx.closePath();
			   boardCanvasCtx.stroke();
		}
		for (vNdx = (baseSquareWidth * scale); vNdx < boardWidth * scale; vNdx += (baseSquareWidth * scale)) {
				//ctx.beginPath();
			   boardCanvasCtx.moveTo(vNdx, 0);
			   boardCanvasCtx.lineTo(vNdx, boardHeight * scale);
			   boardCanvasCtx.closePath();
			   boardCanvasCtx.stroke();
		}
	}
	//setup dummy player tray pieces
	Game.Tray.pieceJson = [{colorIndex: 0, shapeIndex: 0, boardPosX: null, boardPosY: null}, {colorIndex: 1, shapeIndex: 1, boardPosX: null, boardPosY: null},
			{colorIndex: 2, shapeIndex: 2, boardPosX: null, boardPosY: null}, {colorIndex: 3, shapeIndex: 3, boardPosX: null, boardPosY: null}, 
			{colorIndex: 4, shapeIndex: 4, boardPosX: null, boardPosY: null}, {colorIndex: 5, shapeIndex: 5, boardPosX: null, boardPosY: null}];

	Game.Tray.drawTrayPieces(pieceCanvasCtx);

	$("#pieceCanvas").click(function(e){
		Game.Tray.drawTrayPieces(pieceCanvasCtx);
		var pieceSel = -1;
		for (var curX = 0; curX < Game.playerPieceCount; curX++) {
			if (Game.Tray.pieceRects[curX].hitTest(new Game.Coord(e.pageX-$("#pieceCanvas").offset().left, 
						e.pageY-$("#pieceCanvas").offset().top))) {
				pieceSel = curX;
				break;
			}
		}
		if (pieceSel != -1) {
			if (pieceSel != Game.Tray.pieceSelectedIndex) {
				Game.Tray.pieceSelectedIndex = pieceSel;
				Game.Tray.pieceRects[pieceSel].drawRectBorder(pieceCanvasCtx, "FF0000");
			} else {
				Game.Tray.pieceSelectedIndex = -1;
				Game.Tray.drawTrayPieces(pieceCanvasCtx);
			}
		}
	});
	 
	$('#boardCanvas').click(function(e) {
		var clickPos = new Game.Coord(e.pageX-$("#boardCanvas").offset().left, 
						e.pageY-$("#boardCanvas").offset().top);
		var xpos = Math.floor(clickPos.x / (baseSquareWidth * scale));
		var ypos = Math.floor(clickPos.y / (baseSquareHeight * scale));
		
		var alreadyPieceInPosition = false;
		$.each(Game.Board.Pieces, function(ndx, elem) {
			var bxPos = new Game.Coord(Game.Board.OffsetFromScreenOrigin.x + elem.boardPosX, Game.Board.OffsetFromScreenOrigin.y + elem.boardPosY);
			if (bxPos.x === xpos && bxPos.y === ypos) {
				alreadyPieceInPosition = true;
				return;
			}
		});
		
		if (alreadyPieceInPosition)
			return;
			
		var pieceFromThisTurn = -1;
		//check to see if this is a piece the user has already placed this turn
		$.each(Game.Tray.pieceJson, function(ndx, elem) {
			if (elem.boardPosX != null && elem.boardPosY != null) {
				var bxPos = new Game.Coord(Game.Board.OffsetFromScreenOrigin.x + elem.boardPosX, Game.Board.OffsetFromScreenOrigin.y + elem.boardPosY);
				if (bxPos.x === xpos && bxPos.y === ypos) {
					pieceFromThisTurn = ndx;
					return;
				}
			}
		});
		
		if (pieceFromThisTurn != -1) {
			Game.Tray.recallPiece(Game.Tray.pieceJson[pieceFromThisTurn]);
		}
		if (Game.Tray.pieceSelectedIndex >= 0) {
			Game.DrawPiece(boardCanvasCtx, xpos * (baseSquareWidth * scale), ypos * (baseSquareHeight * scale),
				baseSquareWidth * scale, baseSquareHeight * scale, Game.Tray.pieceJson[Game.Tray.pieceSelectedIndex].colorIndex,
				Game.Tray.pieceJson[Game.Tray.pieceSelectedIndex].shapeIndex);
			Game.Tray.pieceJson[Game.Tray.pieceSelectedIndex].boardPosX = xpos - Game.Board.OffsetFromScreenOrigin.x;
			Game.Tray.pieceJson[Game.Tray.pieceSelectedIndex].boardPosY = ypos - Game.Board.OffsetFromScreenOrigin.y;
			Game.Tray.pieceSelectedIndex = -1;
			Game.Tray.drawTrayPieces(pieceCanvasCtx);
		}
		
		$('input.moveButton').attr('disabled', Game.Tray.piecesOnBoard().length === 0);
	});
	 
	$.each(Game.Board.Pieces, function(ndx, elem) {
		var bxPos = new Game.Coord(Game.Board.OffsetFromScreenOrigin.x + elem.boardPosX, Game.Board.OffsetFromScreenOrigin.y + elem.boardPosY);
		Game.DrawPiece(boardCanvasCtx, bxPos.x * (baseSquareWidth * scale), bxPos.y * (baseSquareHeight * scale),
			baseSquareWidth * scale, baseSquareHeight * scale, elem.colorIndex,	elem.shapeIndex);
	});
	
	$('input.moveButton').attr('disabled', true);
	$('#btnRecall').click(function() {
		$.each(Game.Tray.piecesOnBoard(), function(ndx, elem) {
			if (elem.boardPosX != null && elem.boardPosY != null) {
				Game.Tray.recallPiece(elem);
			}
		});
		$('input.moveButton').attr('disabled', Game.Tray.piecesOnBoard().length === 0);
	});
});

</script>

<canvas id="boardCanvas" width="800" height="500">

</canvas>

<div style="float: top">
<div  style="float: left">
<canvas id="pieceCanvas" width="360" height="60"/>
</div>
<div  style="float: left">
<table>
<tr>
	<td><input type="button" value="Send Move" id="btnSendMove" class="moveButton"/></td>
</tr>
<tr>
	<td><input type="button" value="Recall" id="btnRecall" class="moveButton"/></td>
</tr>
</table>
</div>

</body>

</html>